<template>
  <a-page class="q-mb-xl" search-disabled id="map">
    <div v-if="instance" :class="{'shadow-light q-mx-xs': $q.screen.gt.md, 'page-fullscreen': fullscreen}">
      <div v-if="instance.projection === 'DEFAULT'" class="row bg-center" :class="{'page-bar': !fullscreen && $q.screen.gt.md, 'iframe-default': !fullscreen, 'iframe-fullscreen': fullscreen}" style="height: 60vh;">
        <iframe :src="iframeUrl" height="100%" width="100%" frameborder="0">
        </iframe>
        <div style="position: absolute;right:0;bottom: 0" class="q-mb-sm q-mr-sm">
          <a target="_blank" :href="'https://www.ageeye.cn/map/'+ instance.id + '/?static=0'"><q-btn class="button-tag" color="grey-9">新窗口打开</q-btn></a>
          <!--<q-btn class="button-tag" color="dark" @click="fullscreen = !fullscreen">全屏</q-btn>-->
        </div>
      </div>
      <a-map-viewer v-else :map="instance"></a-map-viewer>
      <div class="row justify-center bg-white">
        <article class="col-xl-8 col-lg-10 col-md-12 q-pa-sm">
          <header class="q-mt-xl q-mb-md text-grey-9" :class="{'text-center': $q.screen.gt.md}"  style="text-shadow: 2px 2px 1px #fff">
            <h1 class="bold" :class="{'size-28': $q.screen.gt.md, 'size-22': !$q.screen.gt.md}">{{ instance.name || '未命名地图' }}</h1>
          </header>
          <div class="text-light-blue-10 size-14 q-mb-md row" :class="{'justify-center': $q.screen.gt.md}">
            <a-heads :user="instance.add_user" :editors="instance.editors"></a-heads>
          </div>
          <div class="text-content text-grey-9" v-html="instance.content">
          </div>
          <div class="q-mt-xl" :class="{'row items-center': $q.screen.gt.xs}">
            <div class="col q-mb-md">
              <a-up class="q-mr-xs" :up="instance.up_number" type="map" :id="instance.id" :upd="instance.upd"></a-up>
              <a-collect class="q-mr-xs" type="map" :id="instance.id" :collected="instance.collected"></a-collect>
              <!--<q-btn  class="q-px-sm q-mr-xs" color="primary" flat dense><q-icon name="arrow_downward"/>下载</q-btn>-->
              <a-share :title="instance.name" class="q-mr-xs"></a-share>
              <q-btn v-if="isEditor" flat color="primary" class="button-tag" @click="openEditMapLink">
                <q-icon name="edit" class="q-mr-xs"/> 编辑
              </q-btn>
            </div>
            <div class="text-grey-7">
              <time class="size-14 q-mx-xs" datetime="1991-09-22">更新于{{ timesince(instance.update_date) }}</time>
              <span class="size-14 q-mx-xs">{{ instance.read }}阅读</span>
            </div>
          </div>
          <!--<div class="q-my-md row">-->
            <!--<q-btn rounded color="blue-1" text-color="primary" class="q-mx-xs button-tag">古地图</q-btn>-->
            <!--<q-btn rounded color="blue-1" text-color="primary" class="q-mx-xs button-tag">明朝</q-btn>-->
          <!--</div>-->
          <!--<div class="q-mt-md">-->
            <!--<div class="q-mb-sm title text-center size-24">相关地图</div>-->
            <!--<a-map-image-boxes :maps="maps" simple></a-map-image-boxes>-->
          <!--</div>-->
          <a-comment-boxes type="map" :id="id" title="评论" :map="instance"></a-comment-boxes>
        </article>
      </div>
    </div>
  </a-page>
</template>

<script>
  // import AMapViewer from '../components/map/MapViewer'
  import { openURL } from 'quasar'

  export default {
    name: 'PageMap',
    components: {
      AMapViewer: function (resolve) {
        require(['../components/map/MapViewer'], resolve)
      }
    },
    props: {
      id: {
        type: [Number, String],
        required: true
      }
    },
    data () {
      return {
        instance: null,
        relatedMaps: null,
        fullscreen: false,
        up: false
      }
    },
    computed: {
      iframeUrl () {
        if (!this.instance) {
          return null
        }

        const id = this.instance.id
        const { protocol, host } = location

        let url

        if (process.env.NODE_ENV === 'development') {
          url = `http://118.31.228.164:8000/map/${id}/?static=0`
        } else {
          url = `${protocol}//${host}/map/${id}/?static=0`
        }

        if (!this.fullscreen) {
          url += '&pure=pure-mode'
        }

        return url
      },
      isEditor () {
        if (!this.auth || !this.instance) {
          return false
        }
        if (this.auth.id === this.instance.add_user.id) {
          return true
        }

        for (const editor of this.instance.editors) {
          if (editor.id === this.auth.id) {
            return true
          }
        }

        return false
      }
    },
    watch: {
      fullscreen (fullscreen) {
        const element = document.getElementById('q-app')

        if (fullscreen === true) {
          element.className = 'app-fullscreen'
        } else {
          element.className = ''
        }
      }
    },
    created () {
      this.getMap()
    },
    methods: {
      getMap () {
        this.getRequest({
          api: '/api/map/{id}/',
          id: this.id
        })
      },
      openEditMapLink () {
        const id = this.instance.id
        openURL(`https://www.ageeye.cn/map/edit/?pk=${id}/`)
      }
    }
  }
</script>

<style lang="stylus">
  #map
    .page-fullscreen
      height 0
      overflow hidden
    .iframe-default
      position relative
    .iframe-fullscreen
      position fixed
      top 0
      bottom 0
      right 0
      left 0
      z-index 5000
      height 100%!important
    .map-content
      line-height 1.8em!important
      font-size 18px
      p
        line-height 1.8em!important
        font-size 18px
</style>
